<template>
  <el-container>
    <el-header class="auditor_header">
      审核中的申报
    </el-header>
    <el-main>
      <el-dialog v-model="centerDialogVisible" title="申报详情" width="60%" center>
    <span>
       <el-row>
          <el-col :span="4">用户名</el-col>
          <el-col :span="20">{{informData[currentRow-1].username}}</el-col>
        </el-row>
               <el-row>
          <el-col :span="4">申请时间</el-col>
          <el-col :span="20">{{informData[currentRow-1].applyDate}}</el-col>
        </el-row>
               <el-row>
          <el-col :span="4">开始时间</el-col>
          <el-col :span="20">{{informData[currentRow-1].beginDate}}</el-col>
        </el-row>
               <el-row>
          <el-col :span="4">结束时间</el-col>
          <el-col :span="20">{{informData[currentRow-1].endDate}}</el-col>
        </el-row>
               <el-row>
          <el-col :span="4">途经城市</el-col>
          <el-col :span="20">{{informData[currentRow-1].passCities}}</el-col>
        </el-row>
               <el-row>
          <el-col :span="4">起点</el-col>
          <el-col :span="20">{{informData[currentRow-1].roadBeginName}}</el-col>
        </el-row>
               <el-row>
          <el-col :span="4">终点</el-col>
          <el-col :span="20">{{informData[currentRow-1].roadEndName}}</el-col>
        </el-row>
               <el-row>
          <el-col :span="4">所选路线</el-col>
          <el-col :span="20">{{informData[currentRow-1].ChooseRoad}}</el-col>
        </el-row>
               <el-row>
          <el-col :span="4">车牌号</el-col>
          <el-col :span="20">{{informData[currentRow-1].truckLicense}}</el-col>
        </el-row>
    </span>

        <template #footer>
      <span class="dialog-footer">
<!--        <el-button @click="centerDialogVisible = false">C</el-button>-->
        <el-button type="primary" @click="centerDialogVisible = false">
          返回
        </el-button>
      </span>
        </template>
      </el-dialog>
      <el-table :data="informData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="applyDate" label="申报时间" />
        <el-table-column prop="roadBeginName" label="起始地"/>
        <el-table-column prop="roadEndName" label="终点地"/>
        <el-table-column  label="操作">
          <template v-slot:default="scope">
            <el-button  type="primary" @click="centerDialogVisible=true,setCurrentRow(scope.row.id)"
            >查看详情</el-button>
            <el-popconfirm title="确定要撤回吗?" @confirm="deleteInform(informData[scope.row.id-1].roadApplyLogsId)">
              <template #reference>
                <el-button type="danger">撤回</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
          background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
      />
    </el-footer>
  </el-container>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";
export default {
  name: "underReview",
  data(){
    return{
      centerDialogVisible:false,
      currentPage:1,
      pageSize:5,
      pageLength:2,
      total:1,
      currentRow:1,
      informData:[

      ]
    }
  },
  mounted() {
      let userjson=sessionStorage.getItem('user')
      let user=JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/road_apply_logs/getAllApplyLogs',
        data: {
          username: user.username,
        },
        params: {
        },
      })
      .then((res)=>{
        this.informData=res.data.data
            for(var i=0;i<res.data.data.length;i++) {
              this.informData[i].id = i + 1
              if(this.informData[i].whetherUseAdvice==true){
                this.informData[i].ChooseRoad=this.informData[i].suggestRoad
              }
              else{
                this.informData[i].ChooseRoad=this.informData[i].initRoad
              }
            }
        this.total=res.data.data.length
      });
  },
  methods:{
    setCurrentRow:function (num){
      this.currentRow=num
    },
    freshData:function (){
      let userjson=sessionStorage.getItem('user')
      let user=JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/road_apply_logs/getAllApplyLogs',
        data: {
          username: user.username,
        },
        params: {
        },
      })
          .then((res)=>{
            this.informData=res.data.data
            for(var i=0;i<res.data.data.length;i++) {
              this.informData[i].id = i + 1
              if(this.informData[i].whetherUseAdvice==true){
                this.informData[i].ChooseRoad=this.informData[i].suggestRoad
              }
              else{
                this.informData[i].ChooseRoad=this.informData[i].initRoad
              }
            }
            this.total=res.data.data.length
          });
    },
    deleteInform:function (a){//撤回
      let userjson=sessionStorage.getItem('user')
          let user=JSON.parse(userjson)
          axios({
            method: 'post',
            url: '/api/road_apply_logs/retractApply',
            data: {
              roadApplyLogsId:a,
            },
            params: {
              username: user.username,
            },
          })
          .then((res)=>{
             if(res.data.success==true){
               // alert("撤回成功")
               ElMessage.success('撤回成功')
             }
             else if(res.data.success==false){
               // alert("撤回失败")
               ElMessage.error('撤回失败')
             }
            // for(var i=0;i<res.data.data.length;i++) {
            //   this.informData[i].id = i + 1
            // }
            // this.total=res.data.data.length
            this.freshData()
          });
    }
  }
}
</script>

<style scoped>
.el-pagination{
  justify-content: center !important;
}
.auditor_header{
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}
.el-container{
  height: 100%;
  width: 100%;
}
.el-footer{
  text-align: center;
  position: relative;
  bottom: 0px;
}
.el-row{
  margin: 20px;
}
</style>